<template>
	<view :style="{ '--color': vuex_config.adminTheme, '--price': vuex_config.adminPrice }">
		<view class="search">
			<view class="search_title">核销码</view>
			<view class="input">
				<u-search clearabled @search="search" @clear="clear" :show-action="false" shape="square" height="64" v-model="searchName" placeholder="请输入核销码"></u-search>
			</view>
			<view class="search_btn" @click="search">查询</view>
			<view class="iconfont iconfont-e639" @click="openScan"></view>
		</view>
		<view class="main_item" v-for="(item, index) in dataList" :key="index" @click="openDetail(item)">
			<view class="title_main">
				<view class="title_l">
					<view class="sign"></view>
					<view class="order_no">订单编码：{{ item.order_no }}</view>
				</view>
			</view>
			<view class="order_cont">
				<view class="bor">
					<view class="basic_item">
						<view class="basic_l">联系人：</view>
						<view class="basic_r">{{ item.name }}</view>
					</view>
					<view class="basic_item">
						<view class="basic_l">手机号：</view>
						<view class="basic_r">{{ item.mobile }}</view>
					</view>
					<view class="basic_item">
						<view class="basic_l">收货地址：</view>
						<view class="basic_r">{{ item.address }}</view>
					</view>
					<view class="basic_item">
						<view class="basic_l">下单时间：</view>
						<view class="basic_r">{{ item.date_creation | formTime() }}</view>
					</view>
					<view class="basic_item">
						<view class="basic_l">共{{item.num}}件商品</view>
						<view class="basic_r" style="margin-left: 20rpx;">合计：￥{{ item.total_amount }}</view>
					</view>
				</view>
			</view>
			<view class="bot_s " :class="[item.num == item.validate_num?'disabled':'use']">{{item.num == item.validate_num?'已核销':'未核销'}}</view>
		</view>
		<sww-load-more :params="dataListParams"></sww-load-more>
	</view>
</template>

<script>
import { pagingMixin } from '@/mixins/sysPaging.js';
import { formatDate } from '@/utils/moment/index.js';
import {wxScanCode} from '@/utils/uniPromise.js'
export default {
	mixins: [pagingMixin],
	data() {
		return {
			init: false,
			searchName: ''
		};
	},
	onLoad() {
		// this.$loading();
		this.initPage();
	},
	onShow() {
		if (this.init) {
			this.initPage();
		} else {
			this.init = true;
		}
	},
	filters: {
		formTime(val) {
			return formatDate(val, 'YYYY-MM-DD HH:mm:ss');
		}
	},
	onReachBottom() {
		this._load_data();
	},
	onPullDownRefresh() {
		this.initPage();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 700);
	},
	methods: {
		initPage() {
			if(!this.searchName){
				this.dataList = []
				this.dataListParams.init = false
			}else{
				let params = {
					business_id: this.vuex_adminuser.pk_id,
					order_no:this.searchName || null
				};
				this._init_data('GetWriteOFFOrderList',params);
			}
		},
		clear(){
			this.dataList = []
			this.dataListParams.init = false
		},
		search (e) {
			this.initPage()
		},
		// 扫码
		openScan () {
			wxScanCode().then(res=>{
				this.searchName = res.result
				this.initPage()
			})
		},
		openDetail(item) {
			this.$linkTo(`/package/system/order/verifiOrder/detail?order_no=${item.order_no}`)
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: $www-theme-bg;
}
</style>
<style scoped lang="scss">
.search {
	background-color: #fff;
	display: flex;
	align-items: center;
	height: 106rpx;
	padding: 0 30rpx;
	.search_title{
		margin-right: 18rpx;
	}
	.input{
		flex: 1;
		overflow: hidden;
	}
	.search_btn{
		background-color: var(--color);
		color: #fff;
		padding: 0 18rpx;
		height: 64rpx;
		line-height: 64rpx;
		margin-right: 18rpx;
		border-radius: 0 10rpx 10rpx 0;
	}
	.iconfont{
		color: var(--color);
		font-size: 56rpx;
	}
}
.main_item {
	background-color: #fff;
	margin: 20rpx 30rpx;
	border-radius: 8rpx;
	overflow: hidden;
}
.title_main {
	display: flex;
	height: 80rpx;
	align-items: center;
	padding-right: 22rpx;
	.title_l {
		flex: 1;
		overflow: hidden;
		display: flex;
		align-items: center;
		.sign {
			width: 10rpx;
			height: 28rpx;
			margin-right: 10rpx;
			background-color: var(--color);
		}
		.order_no {
			font-weight: bold;
			color: #222;
			font-size: 30rpx;
		}
	}
}
.order_cont {
	padding: 0 20rpx;
	.bor {
		padding: 20rpx 0 6rpx;
		border-top: 1px solid #f5f5f5;
	}
	.basic_item {
		margin-bottom: 16rpx;
		display: flex;
		line-height: 36rpx;
		.basic_r {
			flex: 1;
			overflow: hidden;
		}
	}
}
.bot_s {
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
		color: #fff;
	&.disabled {
		background-color: #cccccc;
	}
	&.use{
		background-color: var(--color);
	}
}
</style>
